<template>
	<view class="content">
		<view class="box" v-for="i in list">
			<view class=" item" :class="item.is_signature==1?'act':''" v-for="(item,index ) in i ">
				<view class="title">{{item.name}}</view>
				<image v-if="item.is_signature==1" @click="nav(item)" class="seal" src="@/static/seal.png"
					mode="widthFix">
				</image>
				<view class="signing seal" v-else @click="nav(item)">
					立即签约
				</view>

			</view>
			<view v-if="i.length % 3!=0" class="item nobg"></view>
			<view v-if="i.length % 3==1" class="item nobg"></view>
		</view>

	</view>
</template>

<script>
	import {
		getcontractlist,
		createbytemplatecomponents
	} from "@/api/index.js"
	export default {
		data() {
			return {
				list: []
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				getcontractlist().then(res => {
					let list = []

					for (let i = 0; i < res.data.length; i += 3) {
						list.push(res.data.slice(i, i + 3));
					}
					console.log(list)
					this.list = list
				})
			},
			nav(item) {
				const url = item.template_id == 10 ? './fingerprint' : "./general"
				uni.setStorageSync('generalItem', JSON.stringify(item));
				uni.navigateTo({
					url: url
				})

			}
		}
	}
</script>

<style lang="less">
	@import url("../../index.less");

	.content {
		.box {
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			width: 690rpx;
			margin: 0 auto;

			.item {
				width: 210rpx;
				height: 250rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				opacity: 1;
				border: 1rpx solid #fff;
				margin-top: 30rpx;
				position: relative;
				margin-right: 15rpx;

				.title {
					font-size: @font16;
					color: #000000;
					text-align: center;
					width: 170rpx;
					margin: 30rpx auto;
				}

				.seal {
					width: 100rpx;
					position: absolute;
					top: 118rpx;
					left: 55rpx;
				}

				.signing {

					height: 101rpx;
					background: #FF7100;
					opacity: 1;
					font-size: @font14;
					font-family: Segoe UI, Segoe UI;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 101rpx;
					text-align: center;
					border-radius: 50%;
					margin: 0 auto;
				}
			}

			.act {
				border: 1rpx solid #FF7100;
			}
			.nobg{
				background: none;
				border-color: #F8F9FA;
			}
		}

	}
</style>